<template>
	<view class="index-container">
		<!-- 顶部信息区 -->
		<view class="header-section">
			<view class="title-bar">
				<!-- <text class="title">智赢记·进销存管理</text> -->
				<view class="actions">
					<!-- <text>···</text>
					<text class="separator">-</text>
					<text class="circle">○</text> -->
				</view>
			</view>
			<view class="sales-overview">
				<view class="today-sales">
					<view class="sales-label">
						<text>今日销售额</text>
						<u-icon name="eye" color="#fff" size="20"></u-icon>
					</view>
					<text class="sales-amount">0.00</text>
				</view>
				<view class="consult-icon">
					<u-icon name="server-man" color="#3c9cff" size="25" custom-prefix="custom-icon"></u-icon>
					<!-- 如果需要完全一样的图标，可能需要自定义图标 -->
					<!-- <image src="/static/icons/consult.png" class="custom-consult-icon"></image> -->
					<!-- <text>咨询</text> -->
				</view>
			</view>
			<view class="monthly-stats">
				<view class="stat-item">
					<text class="stat-label">本月销售额</text>
					<text class="stat-value">0.00</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">本月利润</text>
					<text class="stat-value">0.00</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">库存数量</text>
					<text class="stat-value">0.00</text>
				</view>
			</view>
		</view>

		<!-- 滚动通知 -->
		<u-notice-bar :text="noticeText" mode="link" speed="50" leftIcon="volume"></u-notice-bar>

		<!-- 功能九宫格 -->
		<view class="grid-section">
			<u-grid :col="3" :border="false">
				<u-grid-item v-for="(item, index) in gridList" :key="index" @click="handleGridClick(item)"
					customStyle="padding-top: 20rpx; padding-bottom: 20rpx;">
					<view class="grid-item-content">
						<view class="icon-wrapper" :style="{ backgroundColor: item.bgColor }">
							<u-icon :name="item.icon" :color="item.color" size="50"></u-icon>
						</view>
						<text class="grid-text">{{ item.name }}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 定转子查询按钮 -->
		<view class="stator-query-button-container">
			<u-button type="primary" @click="goToStatorQuery"
				color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" icon="grid-fill">定转子查询</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			noticeText: '风雨同舟，售后无忧',
			gridList: [
				{ name: '进货', icon: 'shopping-cart-fill', color: '#ff9800', bgColor: '#fff0d5', path: '/pages/order/order', targetTabIndex: 1 },
				// { name: '其他收入', icon: 'plus-circle-fill', color: '#3f51b5', bgColor: '#e8eaf6', path: '/pages/order/order', targetTabIndex: 2 },
				// { name: '其他支出', icon: 'rmb-circle-fill', color: '#ffc107', bgColor: '#fff7d1', path: '/pages/order/order', targetTabIndex: 3 },
				{ name: '销售', icon: 'red-packet-fill', color: '#00bcd4', bgColor: '#d6f8fb', path: '/pages/order/order', targetTabIndex: 0 },
				{ name: '客户', icon: 'account-fill', color: '#ff7599', bgColor: '#ffe4ea', path: '/subPack/client/index' },
				{ name: '供应商', icon: 'car-fill', color: '#ff5722', bgColor: '#ffe4dc', path: '/pages/supplier/index' },

				{ name: '明细', icon: 'file-text-fill', color: '#9c27b0', bgColor: '#f3e5f5', path: '/pages/detail/detail' },
				// { name: '定转子查询', icon: 'grid-fill', color: '#9e9e9e', bgColor: '#f0f0f0', path: '/subPack/stator/index' },
			]
		};
	},
	methods: {
		handleGridClick(item) {
			if (item.path) {
				if (item.path === '/pages/order/order' && item.targetTabIndex !== undefined) {
					uni.setStorageSync('targetOrderTabIndex', item.targetTabIndex);
					uni.switchTab({
						url: item.path,
						fail: (err) => {
							console.error("SwitchTab to order failed:", err);
							uni.removeStorageSync('targetOrderTabIndex');
						}
					});
				} else if (item.path === '/pages/detail/detail') {
					uni.switchTab({
						url: item.path
					});
				} else {
					uni.navigateTo({ url: item.path });
				}
			} else {
				uni.showToast({
					title: `点击了 ${item.name}`,
					icon: 'none'
				})
			}
		},
		// 修改跳转方法
		goToStatorQuery() {
			uni.navigateTo({ url: '/subPack/stator/index?tabIndex=0' }); // 添加 tabIndex=2 参数
		},
		// 如果需要从API获取数据，可以在这里添加方法
		// getDashboardData() { ... }
	},
	onShow() {
		// 可以在这里调用API获取数据
		// this.getDashboardData();
	}
};
</script>

<style lang="scss" scoped>
.index-container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.header-section {
	background: linear-gradient(135deg, #4db6ac, #26a69a); // 蓝绿色渐变
	color: #fff;
	padding: 30rpx 30rpx 20rpx;
	border-bottom-left-radius: 30rpx;
	border-bottom-right-radius: 30rpx;
	margin-bottom: 20rpx;

	.title-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		font-size: 28rpx;

		.title {
			font-weight: bold;
		}

		.actions {
			display: flex;
			align-items: center;

			.separator {
				margin: 0 15rpx;
			}

			.circle {
				margin-left: 15rpx;
			}
		}
	}

	.sales-overview {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 30rpx;

		.today-sales {
			.sales-label {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				margin-bottom: 10rpx;
				opacity: 0.9;

				text {
					margin-right: 10rpx;
				}
			}

			.sales-amount {
				font-size: 64rpx;
				font-weight: bold;
			}
		}

		.consult-icon {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 10rpx;

			.custom-consult-icon {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 5rpx;
			}

			.u-icon {
				// 或者自定义图标的样式
				background-color: #fff;
				border-radius: 50%;
				padding: 15rpx;
				margin-bottom: 5rpx;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			}

			text {
				font-size: 24rpx;
				color: #fff; // 与背景融合
			}
		}
	}

	.monthly-stats {
		display: flex;
		justify-content: space-around;
		text-align: center;
		padding-top: 15rpx;
		border-top: 1rpx solid rgba(255, 255, 255, 0.2);


		.stat-item {
			.stat-label {
				display: block;
				font-size: 24rpx;
				margin-bottom: 5rpx;
				opacity: 0.8;
			}

			.stat-value {
				font-size: 30rpx;
				font-weight: 500;
			}
		}
	}
}

/deep/ .u-notice-bar {
	margin-bottom: 20rpx !important; // 调整与下方九宫格的间距
}


.grid-section {
	background-color: #fff;
	border-radius: 16rpx;
	margin: 0 20rpx 20rpx; // 添加左右和底部边距
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	overflow: hidden; // 确保圆角生效

	.grid-item-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.icon-wrapper {
		width: 120rpx;
		height: 120rpx;
		border-radius: 16rpx; // 轻微圆角
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 15rpx; // 图标和文字的间距
	}

	.grid-text {
		font-size: 26rpx;
		color: #333;
		margin-top: 0; // 覆盖 uView 可能的默认 margin
	}
}

/* 定转子查询按钮容器样式 */
.stator-query-button-container {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx 40rpx;
	/* 上下、左右内边距 */
	margin-top: 10rpx;
	/* 与上方元素的间距 */
	margin-bottom: 30rpx;
	/* 与下方元素的间距 */
}

// 如果需要自定义咨询图标
/*
.custom-consult-icon {
    width: 50rpx; // 根据你的图标调整
    height: 50rpx; // 根据你的图标调整
    background-color: #fff;
    border-radius: 50%;
    padding: 10rpx; // 内边距让图标小一点
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
*/
</style>